<template>
  <div class="">
    <myHeader @keydown.enter="add" v-model="name"></myHeader>
    <myList :flag="false"></myList>
    <myList :flag="true"></myList>
    <myContent></myContent>
    <h2>父组件{{ num }}元</h2>
    <button @click="num++">加</button>
  </div>
</template>

<script setup>
import myHeader from "../components/myHeader.vue";
import myList from "../components/myList.vue";
import myContent from "../components/myContent.vue";
import { ref, provide, watch } from "vue";
import { useStore } from "vuex";

let num = ref(999);
// 是将数据发给后代组件 provide
provide("num", num);

// 也可以将函数传到孙子组件
const fn = (value) => {
  console.log("我是孙子传过来的数据", value);
};
provide("fn", fn);

let name = ref("");
let store = useStore();

watch(
  () => num,
  (res) => {
    console.log(res.value);
  },
  { deep: true }
);

function add() {
  store.commit("add", name.value);
}

components: {
  myHeader, myList, myContent;
}
</script>

<style lang="scss" scoped></style>
